<!DOCTYPE html>
<html>
<head>
    <title>{$platform.name|default=''}</title>
    <link href="/static/css/framework-font.css" rel="stylesheet"/>
    <script src="/static/js/jquery-2.1.1.js"></script>
    <script src="/static/bootstrap/js/bootstrap.js"></script>
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>

    <script src="/static/js/jquery.cookie.js"></script>
    <link href="/static/css/framework-theme.css" rel="stylesheet"/>


    <!--弹框js-->
    <script src="/static/js/yii.js"></script>
    <script src="/static/laydate/laydate.js"></script>

    <!--引用layui弹框插件-->
    <script src="/static/layui/layui.all.js"></script>
    <script src="/static/layui/layui.js"></script>
    <link href="/static/layui/css/layui.css" rel="stylesheet"/>
    <script src="/static/layui/lay/modules/layer.js"></script>


</head>
<body>
<style>
    .new_serach{
        margin-top: 80px;
    }
    .video{
        text-align: center
    }
    .layui-bg-gray{
        padding: 30px;
    }
    .centeredVideo{
        width: 100%;
        height: 1000px;
    }
    h2{
        text-align: center;
        margin-top: 50px;
    }
</style>


<div class="newtest">

    <h2 >通道名称:【 {$detail.deviceName|default=''} 】</h2>
    <div class="container new_serach">

        <form class="form-horizontal layui-form" action="/wuye/monitor/flvs" method="get">

            <div class="form-group center-block" >
                <label class="col-sm-2 control-label">*监控时间:</label>
                <div class="col-sm-3">
                    <input class="layui-input" name="time" id="test6"  value="{$time|default=''}" autocomplete="off">
                </div>
                <div class="col-sm-3">
                    <input type="submit" class="layui-btn" value="查看">
                </div>
            </div>

            <input type="hidden" name="id" value="{$id|default=''}">
        </form>
    </div>


    <div class="layui-bg-gray" >
        <div class="layui-row layui-col-space15">

            <div class="video">
                <div class="layui-card">
                    <div class="layui-card-body" >
                        <video id="videoElement" class="centeredVideo" controls autoplay muted >
                        </video>
                    </div>
                </div>
            </div>

        </div>

    </div>
    <input type="hidden" id="url" value="{$path|default=''}">
</div>

</body>

<script src="/static/js/flv.js"></script>

<script>

    var path = $("#url").val();
    if (path){
        var videoElement = document.getElementById('videoElement');
        if (flvjs.isSupported()) {
            var flvPlayer = flvjs.createPlayer({
                type: 'flv',
                isLive: false,//<====加个这个
                url: path,//<==自行修改
            },{
                enableWorker:false,
                enableStashBuffer:true,
                stashInitialSize:120
            });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load(); //加载
            flvPlayer.play();


            videoElement.onloadedmetadata = function (d) {

                console.log(d);
            }

        }
    }


    layui.use(['layedit'], function () {

        //年月范围
        laydate.render({
            elem: '#test6'
            ,type: 'datetime'
            , range: true
        });
    });

</script>
</html>